<template>
  <div class="RechargeType">
    <Header title="充值类型"></Header>
    <div style="padding:32px 6px 0 6px">
      <checker class="demo1-check" v-model="items1Select" default-item-class="demo1-item"
               selected-item-class="demo1-item-selected">
        <checker-item :value="item" v-for="(item, index) in MealList" :key='item.id' style="position: relative"
                      @on-item-click="getitemvalue">
          {{item.name}}
          <img v-if="item.recommend==1" src="static/icon/my_vip_selected.png"
               style="width: 50px;position: absolute;top: -23px;right: -5px" alt="">
        </checker-item>
      </checker>

      <checker v-if="items1Select.id!=0&&MealList.length>0" class="demo2-check" v-model="demo2"
               default-item-class="demo2-item"
               selected-item-class="demo1-item-selected">
        <checker-item :value="item" v-for="(item, index) in items2" :key="index">{{item.value}}</checker-item>
      </checker>
      <div v-if="items1Select.id==0" :style="{border:numberi?'1px #fff solid':'1px #f25f5f solid'}" class="numberi">
        充值金额(元)： <input type="text" style="height: 40px;" v-model="RechargeMoney" placeholder="输入充值金额">
      </div>

      <div v-if="items1Select.id!=0" style="text-align: center;padding-top: 20px;font-size: 16px">
        购买金额：<span style="color:#f25f5f" v-if="demo2.id==1">￥{{items1Select.lonePrice}}元</span>
        <span style="color:#f25f5f" v-if="demo2.id==2">￥{{items1Select.serialPrice}}元</span>
      </div>
      <x-button type="primary" :disabled="!numberi" class="saveinfo" @click.native="saveinfo">确定
      </x-button>
      <div v-for="(item,index) in explain" v-if="items1Select.id==index"
           style="padding:18px 2px;font-size:12px;text-align: center">
        {{item}}
      </div>
      <div style="font-size: 12px;color:#888;padding: 0 20px" v-if="items1Select.id==0">
        {{RechargeInfo.summary}}
      </div>
      <div style="font-size: 12px;color:#888;padding: 0 20px" v-if="items1Select.id!=0">
        {{items1Select.summary}}
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Checker, CheckerItem, XButton} from 'vux'
  import {mapState} from 'vuex'
  import {MealList} from '../../api/mine'
  import Header from './../Header'

  export default {
    data () {
      return {
        MealList: [],
        items1Select: {},
        items2: [
          {key: '2', value: '联排座', id: '2'},
          {key: '1', value: '独立座', id: '1'}
        ],
        RechargeMoney: '',
        demo2: {key: '2', value: '联排座', id: '2'},
        explain: ['*充值金额必须为整数，如：200', '*月套餐按使用当日开始计算', '*半年套餐按使用当日开始计算', '*年套餐按使用当日开始计算'],
        updata: {},//上一个页面传下来的数据
        numberi: true
      }
    },
    methods: {
      getitemvalue (itemValue) {
        this.items1Select = itemValue
      },
      saveinfo () {
        this.$store.dispatch('SELECT_COUPON', {
          selectCoupon: {}
        })
        if (Object.keys(this.items1Select).length > 0) {
          debugger
          if (this.items1Select.id === 0) {
            if (this.RechargeMoney) {
              this.$router.push({
                // path: `/Mine/SureRecharge/${this.items1Select.id}`
                name: 'SureRecharge',
                query: {
                  paymoney: this.RechargeMoney,
                  typeid: this.items1Select.id,
                  ...this.updata
                }
              })
            } else {
              Vue.$vux.toast.text('请输入充值金额', 'bottom')
            }
          } else {
            if (Object.keys(this.demo2).length > 0) {
              this.$router.push({
                // path: `/Mine/SureRecharge/${this.items1Select.id}`
                name: 'SureRecharge',
                query: {
                  paymoney: this.demo2.id == 1 ? this.items1Select.lonePrice : this.items1Select.serialPrice,
                  typeid: this.items1Select.id,
                  settype: this.demo2.id,
                  expiresDay: this.items1Select.expiresDay,
                  ...this.updata
                }
              })
            } else {
              Vue.$vux.toast.text('请选择座位类型', 'bottom')
            }
          }
        } else {
          Vue.$vux.toast.text('请选择套餐', 'bottom')
        }
      }
    },
    created () {
      this.updata = this.$route.query
      MealList().then(res => {
        let MealList = res.data.data
        MealList.unshift({
          createTime: '2019-01-05 01:39:54',
          creator: 'admin',
          deleted: 0,
          expiresDay: '',
          id: 0,
          lonePrice: 0,
          name: '充值金额',
          recommend: 0,
          serialPrice: 0,
          summary: '',
        })
        this.MealList = MealList
        this.items1Select = res.data.data[0]
        this.$store.dispatch('MEAL_LIST', {MealList: MealList})
      })
      this.$store.dispatch('RECHARGE_INFO')

    },
    watch: {
      RechargeMoney (value) {
        let regu = /^[1-9]\d*$/
        if (regu.test(value)) {
          this.numberi = true
        } else {
          this.numberi = false
        }
      }
    },
    computed: {
      ...mapState({
        RechargeInfo: state => state.RechargeInfo
      })
    },
    components: {
      Header,
      Checker,
      CheckerItem,
      XButton
    },
  }
</script>

<style lang='less' type="text/less">
  .RechargeType {
    color: @font-color;
    .numberi {
      font-size: 14px;
      margin-top: 40px;
      padding: 0 12px;
      height: 42px;
      line-height: 42px;
      text-align: left;
      background: #fff;
      border-radius: 3px
    }
    .demo1-check {
      display: flex;
      justify-content: space-around;
      padding-top: 24px;
    }
    .demo2-check {
      display: flex;
      justify-content: center;
      padding-top: 40px;
    }
    .demo1-item {
      width: 20%;
      font-size: 14px;
      text-align: center;
      height: 42px;
      line-height: 42px;
      background: #fff;
      border-radius: 3px;
      border: 1px #fff solid;
      box-shadow: 0px -2px 0px 0px #F8FAF9,
      -2px 0px 0px 0px #F8FAF9,
      2px 0px 0px 0px #F8FAF9,
      0px 2px 0px 0px #F8FAF9;
    }
    .demo2-item {
      border-radius: 3px;
      padding: 1px 25px;
      border: 1px #fff solid;
      font-size: 14px;
      height: 42px;
      background: #fff;
      line-height: 42px;
      box-shadow: 0px -2px 0px 0px #F8FAF9,
      -2px 0px 0px 0px #F8FAF9,
      2px 0px 0px 0px #F8FAF9,
      0px 2px 0px 0px #F8FAF9;
      &:first-child {
        margin-right: 10px;
      }
    }
    .demo1-item-selected {
      border: 1px #EDC434 solid;
      color: #EDC434;
    }
    input {
      -webkit-appearance: none; /*去除苹果手机input默认样式*/
      border: none;
      &:focus {
        outline: none;
      }
    }
    .saveinfo {
      width: calc(100% - 15px);
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      margin-top: 24px;
      color: #fff;
      border-radius: 42px;
      background-color: @common-color;
      border: none;
    }
  }

</style>
